<template>
  <div class="ComItem-container">
    <a-checkbox-group
      v-if="itemConfig.type === 'checkbox'"
      v-model:value="itemConfig.defaultValue"
      :disabled="itemConfig.disabled"
      :options="
        itemConfig.remote ? itemConfig.optionsRemote : itemConfig.options
      "
      :placeholder="itemConfig.message"
    />
    <a-input
      v-if="itemConfig.type === 'input'"
      v-model:value="itemConfig.defaultValue"
      :disabled="itemConfig.disabled"
      :placeholder="itemConfig.message"
      allow-clear
    />
    <a-textarea
      v-if="itemConfig.type === 'textarea'"
      v-model:value="itemConfig.defaultValue"
      :disabled="itemConfig.disabled"
      :auto-size="{minRows: 2}"
      :placeholder="itemConfig.message"
      allow-clear
    />
    <a-input-number
      v-if="itemConfig.type === 'number'"
      v-model:value="itemConfig.defaultValue"
      :disabled="itemConfig.disabled"
      :controls="itemConfig.controls"
      :placeholder="itemConfig.message"
      allow-clear
    />
    <a-radio-group
      v-if="itemConfig.type === 'radio'"
      v-model:value="itemConfig.defaultValue"
      :disabled="itemConfig.disabled"
      :options="
        itemConfig.remote ? itemConfig.optionsRemote : itemConfig.options
      "
      :placeholder="itemConfig.message"
    />
    <a-select
      v-if="itemConfig.type === 'select'"
      v-model:value="itemConfig.defaultValue"
      :disabled="itemConfig.disabled"
      :options="
        itemConfig.remote ? itemConfig.optionsRemote : itemConfig.options
      "
      :placeholder="itemConfig.message"
      allow-clear
    />
    <a-time-picker
      v-if="itemConfig.type === 'time'"
      v-model:value="itemConfig.defaultValue"
      :disabled="itemConfig.disabled"
      :format="itemConfig.format"
      :valueFormat="itemConfig.valueFormat"
      :placeholder="itemConfig.message"
      allow-clear
    />
    <a-date-picker
      v-if="itemConfig.type === 'date'"
      v-model:value="itemConfig.defaultValue"
      :disabled="itemConfig.disabled"
      :format="itemConfig.format"
      :valueFormat="itemConfig.valueFormat"
      :placeholder="itemConfig.message"
      allow-clear
    />
  </div>
</template>

<script lang="ts" setup>
import Draggable from "vuedraggable";
import {randomString} from "@/utils/common";
import FormItem from "./FormItem.vue";
import {ref} from "vue";

const props = defineProps({
  itemConfig: {
    type: Object,
    default: {}
  }
});

const activeIndex = ref<number>();

const cloneParam = (param: any) => {
  return JSON.parse(JSON.stringify(param));
};

const comAdd = (element, columnIndex) => {
  let newIndex = element.newIndex;
  let newItem = props.itemConfig.columns[columnIndex].children[newIndex];
  let cloneNewItem: any = cloneParam(newItem);
  cloneNewItem.defaultKey = randomString();
  props.itemConfig.columns[columnIndex].children[newIndex] = cloneNewItem;
  activeIndex.value = newIndex;
};

const dragEnd = (e) => {
  activeIndex.value = e.newIndex;
};

const itemDelete = (index) => {
  props.itemConfig.children.splice(index, 1);
};

const itemCopy = (index) => {
  let item = cloneParam(props.itemConfig.children.value[index]);
  item.defaultKey = randomString();
  props.itemConfig.children.value.splice(index, 0, item);
};
</script>

<style lang="less" scoped></style>
